<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
        <link href="jqueryListBox/listbox.css" rel="stylesheet">
        <script src="jqueryListBox/jquery.js"></script>
        <script src="jqueryListBox/listbox.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #body{
                position:absolute;
                bottom:50px;
                left: .5%;
                height:78%;
                width:99%;
                background-color: blue;
            }
            #leftDayPlanner{
                position:absolute;
                left:0px;
                width:200px;
                height:100%;
                background-color: #cccccc;
            }
            #centerDayPlanner{
                position:absolute;
                left:10px;
                width:1085px;
                height:100%;
                background-color:#dddddd;
                overflow: auto;
            }
            #rightDayPlanner{
                position:absolute;
                left:15%;
                width:75%;
                height:100%;
                background-color: #eeeeee;
                display:none;
                overflow:auto;
            }
            #dateSelect{
            }
            .chooseDateButton{
                width:200px;
            }
            #schedule{
                float:left;
            }
            .outerBox{
                border-style: solid;
                border-width: 1px;
                width:145px;
                height:145px;
                display:inline-block;
                margin-left: 4px;
                margin-bottom: 4px;
                background-color: #ffdd80;
            }
            .heading{
                display:inline-block;
                width:100%;
                background-color: #ffdd80;
                text-align: center;
                font-family:monospace;
                margin-top: 0px;
            }
            .innerBox{
                width:100%;
                height:84.5%;
                background-color:#FFFFFF;
                font-size: 8px;
                overflow:hidden;
            }
            .dpInput_Small{
                font-size:8px;
                border:none;
                width:50px;
            }
            .dpInput{
                background-color: #FFFFFF;
                border:none;
            }
            #closePopup{
                right:4px;
                position:absolute;
            }
            #hoursDiv{
                width: 100px;
                height:available;
                overflow:auto;
            }
            .hour1{
                display:inline-block;
                width:100%;    
                background-color: #dddddd;
            }
            .hour2{
                display:inline-block;
                width:100%;
            }
        </style>
        <script>
            var tripId = 1;
            var startDate = "04/01/2013";
            var endDate = "04/20/2013";
            var dList = [];
            $(document).ready(function(){
                //$.get(listAll());
                // $.get(init());
                generateSchedule();
            });
            function generateCalendar(startDate,endDate){
                var startYr, startMo, startDay;
                var endYr, endMo, endDay;
    
                //  MM/DD/YYYY
                startMo = startDate.substring(0,2);
                endMo = endDate.substring(0,2);
                startDay = startDate.substring(3,5);
                endDay = endDate.substring(3,5);
                startYr = startDate.substring(6);
                endYr = endDate.substring(6);
    
                startMo = parseInt(startMo,10);
                startDay = parseInt(startDay,10);
                startYr = parseInt(startYr,10);
    
                endMo = parseInt(endMo,10);
                endDay = parseInt(endDay,10);
                endYr = parseInt(endYr,10);
                
                var d = startDay;
                var m = startMo;
                var y = startYr;
                var dates = [];
                var days = [];
                var x = 0;
                var strM = "";
                var strD = "";;
                var lastOfTheMonth = getLastOfMonth(startMo,startYr) +1;
                if(d != 1){
                    
                }
            }
            function computeDates(startDate,endDate){
                var startYr, startMo, startDay;
                var endYr, endMo, endDay;
    
                //  MM/DD/YYYY
                startMo = startDate.substring(0,2);
                endMo = endDate.substring(0,2);
                startDay = startDate.substring(3,5);
                endDay = endDate.substring(3,5);
                startYr = startDate.substring(6);
                endYr = endDate.substring(6);
    
                startMo = parseInt(startMo,10);
                startDay = parseInt(startDay,10);
                startYr = parseInt(startYr,10);
    
                endMo = parseInt(endMo,10);
                endDay = parseInt(endDay,10);
                endYr = parseInt(endYr,10);
                
                var d = startDay;
                var m = startMo;
                var y = startYr;
                var dates = [];
                var days = [];
                var x = 0;
                var strM = "";
                var strD = "";;
                var lastOfTheMonth = getLastOfMonth(startMo,startYr) +1;
                while(true){
                    if((d > endDay && endMo == m && y == endYr) || (m > endMo && y == endYr) || (y > endYr)){
                        break;
                    }
                    strD = d;
                    if(d < 10){
                        strD = "0" + d;
                    }
                    dates[x++] = formatDate(m,strD,y);
                    d = d+1;
                    d = d % lastOfTheMonth;
                    if(d == 0){
                        d += 1;
                        m = m+1;
                        m = m % 13;
                        if(m == 0){
                            m += 1;
                            y += 1;
                        }
                        lastOfTheMonth = getLastOfMonth(m,y) +1;
                    }
                }
                return dates;
            }
            function formatDate(month,day,year){
                var newMonth = "";
                var formattedDate = "";
                switch(month){
                    case 1:
                        newMonth = "January";
                        break;
                    case 2:
                        newMonth = "February";
                        break;
                    case 3:
                        newMonth = "March";
                        break;
                    case 4:
                        newMonth = "April";
                        break;
                    case 5:
                        newMonth = "May";
                        break;
                    case 6:
                        newMonth = "June";
                        break;
                    case 7:
                        newMonth = "July";
                        break;
                    case 8:
                        newMonth = "August";
                        break;
                    case 9:
                        newMonth = "September";
                        break;
                    case 10:
                        newMonth = "October";
                        break;
                    case 11:
                        newMonth = "November";
                        break;
                    case 12:
                        newMonth = "December";
                        break;
                }
                formattedDate = newMonth + " " + day + ", " + year;
                return formattedDate;
            }
            function getLastOfMonth(mon,year){
                switch(mon){
                    case 2:  
                        if((year%4 == 0 && year%100 != 0) || (year%4 == 0 && year%100 == 0 && year%400==0)){
                            return 29; break;
                        }
                        return 28;
                        break;
                    case 4:
                    case 6:
                    case 9:                    
                    case 11: return 30; break;
                    default: return 31; break;
                }
            }
            function listAll(){
                var ls = [];
                ls = computeDates(startDate,endDate);
                var html = "";
                for(var i = 0; i < ls.length; i++){
                    html += "<option>" + ls[i] + "</option>";
                }
                $("#dateSelect").html(html);
                
                $(function() {
                    $('#dateSelect').listbox({
                        'searchbar':    true,
                        'size': 15,
                        'multiselect':  false
                    });

                });
                //http://jquery.com/upgrade-guide/1.9/#live-removed
                
                $("#test").on("click",function(){
                    doChange();
                });
               
            } 
            function doChange(){
                if(confirm("Are you sure you want to switch to this date: " + $("#dateSelect").val() + " without saving?")){
                    //LOAD PROPER CODE
                    $("#centerDayPlanner").load("./GetDayPlannerServlet?date=" + $("#dateSelect").val() + "&tripId=" + tripId);
                }
                else{
                    //alert("no");
                }
            }
            function generateSchedule(){
                var html="";
                var ls = [];
                ls = computeDates(startDate,endDate);
                dList = ls;
                var div="<div class='outerBox' ";                
                var divClose = "</div>";
                var span = "<span class='heading'>";
                var spanClose = "</span>";
                var innerDiv = "<div class='innerBox' ";
                var i = 0;
                for(i = 0; i < ls.length; i++){
                    html += div + "id='date_" + i + "'>" + span +  ls[i] + spanClose 
                        + innerDiv + "id='inner_" + i + "' alt='" + ls[i] +"'> ";
                    // html += "Here are some things within this event<br/>Here is another thing on a new line<br/>Here is the last";
                    // html += "MORE<br/>MOREMOREMOREOMREMOREMORE AH ahpaw thia itepha pihe at<br/>AHO awi dhwoa pa efi pahefipe af paefhp";
                    html += "<input type='text' class='dpInput_Small' readonly value='Start Position' /><input type='text' class='dpInput_Small' readonly  value='" + ls[i] + "' />";
                    html +- "";
                    html += divClose;
                    html += divClose;
                }
                $("#schedule").html(html);
                var j = 0;
                for(j = 0; j < ls.length; j++){
                    $("#inner_" + j).on("click",function(){
                        //alert($(this).attr("alt") + "\n" + $(this).html());
                        $("#rightDayPlanner").html($(this).attr("alt") + "<br/>" + $(this).html() + "<input type='button' value='Close' id='closePopup' />");

                        $("#rightDayPlanner").show('slow');
                        $("#rightDayPlanner").find("input").removeAttr("class");
                        $("#rightDayPlanner").find("input").removeAttr("readonly");
                        $("#rightDayPlanner").find("input[type=text]").css("background-color","#FFFFFF");
                        var h = $("#rightDayPlanner").html();
                        $("#rightDayPlanner").html(h + calculateHours());
                        $("#closePopup").on("click",function(){
                            $("#rightDayPlanner").hide("slow");
                        });
                        
                    });
                    ///$("#inner_" + j).load("./GetDayPlannerServlet?date=" + $(this).attr("alt") + "&tripId=" + tripId);
                }
                
                $(document).on('mouseover', '.innerBox', function() {
                    //do something
                    $(this).css("background-color","#aaaaaa");
                    $(this).find("input").css("background-color","#aaaaaa");
                });
                $(document).on('mouseout', '.innerBox', function() {
                    //do something
                    $(this).css("background-color","#FFFFFF");
                    $(this).find("input").css("background-color","#FFFFFF");
                });
                
            }
            function search(){
                var txt = $("#searchBox").val().toLowerCase();
                var ls = dList;
                $("#schedule").find(".outerBox").each(function(){
                    $(this).css("display","inline-block");
                });
                for(var j = 0; j < ls.length; j++){
                    var bool = true;
                    var i = 0;
                    var k = 0;
                    if(txt.length > 1){
                        i = ls[j].toLowerCase().indexOf(txt[k]);
                        for(k = 0; k < txt.length-1; k++){
                            if(ls[j].charAt(++i) != txt[k+1]){
                                bool = false;
                                break;
                            }
                        }              
                    }
                    else if(txt.length == 1){
                        if(ls[j].toLowerCase().indexOf(txt[0]) == -1){
                            bool = false;
                        }
                    }
                    else{
                        
                        break;
                    }
                    if(bool == false){
                        $("#date_" + j).css("display","none");
                    }
                    // break;
                }
            }
            function makeDouble(t){
                t = t + "";
                if(t < 10){
                    return "0" + t;
                }
                return t;
            }
            function calculateHours(){
                var html = "";
                html = "<div id='hoursDiv'>";
                var span1 = "<span class='hour1'";
                var span2 = "<span class='hour2'";
                var cSpan = "</span>";
                for(var h = 0; h < 24; h++){
                    var m = 0;
                    while(m < 60){
                        //0
                        html += span1 + " id='" + h +":" + m + "' >"+ makeDouble(h) + ":" + makeDouble(m)+ cSpan;
                        m += 15;
                        //15
                        html += span2 + " id='" + h +":" + m + "' >"+ makeDouble(h) + ":" + makeDouble(m)+ cSpan;
                        m += 15;
                    }
                }
                html += "</div>";
                return html;
            }
        </script>

    </head>
    <body>
        <div id="body">
            <!--div id="leftDayPlanner">
                <select id='dateSelect'></select>
                <input type='button' id='test' value='text' class='chooseDateButton'/>
            </div-->
            <div id="centerDayPlanner">
                <label for="searchBox">Search For Date: </label><input id="searchBox" type="text" onkeyup="search()"/><br/>
                <div id="schedule"></div>

            </div>
            <div id="rightDayPlanner">

            </div>
        </div>
        
    </body>
</html>